<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="goBack">
        <text class="fa fa-chevron-left fa-gray"></text>
      </view>
      <view class="nav-title">线下培训</view>
      <view class="nav-right" @tap="goToCalendar">
        <text class="fa fa-calendar"></text>
      </view>
    </view>

    <!-- 主内容 -->
    <view class="content">
      <!-- 搜索框 -->
      <view class="search-container">
        <view class="search-box">
          <text class="fa fa-search search-icon"></text>
          <input
            class="search-input"
            type="text"
            placeholder="搜索培训项目"
            v-model="searchKeyword"
            @input="onSearch"
          />
        </view>
      </view>

      <!-- 状态标签页 -->
      <view class="tabs-container">
        <view class="tabs">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            class="tab-item"
            :class="{ 'tab-item-active': activeTab === index }"
            @tap="switchTab(index)"
          >
            <text
              class="tab-text"
              :class="{ 'tab-text-active': activeTab === index }"
            >
              {{ tab }}
            </text>
            <view v-if="activeTab === index" class="tab-indicator"></view>
          </view>
        </view>
      </view>

      <!-- 培训列表 -->
      <scroll-view scroll-y class="training-list">
        <!-- 单次培训1 - 进行中 -->
        <view class="training-card" @tap="goToTrainingDetail('single')">
          <view class="training-content">
            <view class="training-icon training-icon-orange">
              <text class="fa fa-user-md"></text>
            </view>
            <view class="training-info">
              <text class="training-title">心肺复苏术实操培训</text>
              <text class="training-time">开始：2025.01.18 14:00</text>
              <text class="training-time">结束：2025.01.18 17:00</text>
              <text class="training-location">地点：急诊科培训室</text>
              <text class="training-teacher">讲师：张主任</text>
            </view>
            <view class="training-status-wrap">
              <view class="training-status training-status-green">
                <text class="training-status-text">进行中</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 培训项目1 - 进行中 -->
        <view class="training-card" @tap="goToTrainingDetail('project')">
          <view class="training-content">
            <view class="training-icon training-icon-purple">
              <text class="fa fa-graduation-cap"></text>
            </view>
            <view class="training-info">
              <text class="training-title">住院医师规范化培训实习</text>
              <text class="training-project">项目：住院医师规范化培训</text>
              <text class="training-time">开始：2025.01.15 08:00</text>
              <text class="training-time">结束：2025.12.15 18:00</text>
              <text class="training-location">地点：内科、外科、急诊科</text>
              <text class="training-teacher">讲师：李主任</text>
            </view>
            <view class="training-status-wrap">
              <view class="training-status training-status-green">
                <text class="training-status-text">进行中</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 单次培训2 - 已结束 -->
        <view class="training-card" @tap="goToTrainingDetail('single')">
          <view class="training-content">
            <view class="training-icon training-icon-orange">
              <text class="fa fa-user-md"></text>
            </view>
            <view class="training-info">
              <text class="training-title">医疗器械消毒规范培训</text>
              <text class="training-time">开始：2025.01.15 09:00</text>
              <text class="training-time">结束：2025.01.15 12:00</text>
              <text class="training-location">地点：护理部培训室</text>
              <text class="training-teacher">讲师：李护士长</text>
            </view>
            <view class="training-status-wrap">
              <view class="training-status training-status-blue">
                <text class="training-status-text">已结束</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 培训项目2 - 进行中 -->
        <view class="training-card" @tap="goToTrainingDetail('project')">
          <view class="training-content">
            <view class="training-icon training-icon-purple">
              <text class="fa fa-graduation-cap"></text>
            </view>
            <view class="training-info">
              <text class="training-title">ICU专科医师临床实践</text>
              <text class="training-project">项目：ICU专科医师培训</text>
              <text class="training-time">开始：2025.03.01 08:00</text>
              <text class="training-time">结束：2025.06.30 18:00</text>
              <text class="training-location">地点：重症医学科</text>
              <text class="training-teacher">讲师：王主任</text>
            </view>
            <view class="training-status-wrap">
              <view class="training-status training-status-green">
                <text class="training-status-text">进行中</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 单次培训3 - 未开始 -->
        <view class="training-card" @tap="goToTrainingDetail('single')">
          <view class="training-content">
            <view class="training-icon training-icon-orange">
              <text class="fa fa-user-md"></text>
            </view>
            <view class="training-info">
              <text class="training-title">药物过敏反应处理实操</text>
              <text class="training-time">开始：2025.01.25 15:00</text>
              <text class="training-time">结束：2025.01.25 18:00</text>
              <text class="training-location">地点：急诊科培训室</text>
              <text class="training-teacher">讲师：王医生</text>
            </view>
            <view class="training-status-wrap">
              <view class="training-status training-status-gray">
                <text class="training-status-text">未开始</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 没有更多数据 -->
        <view class="no-more">
          <text class="no-more-text">没有更多数据了</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      searchKeyword: "",
      activeTab: 0,
      tabs: ["全部", "未开始", "进行中", "已结束"],
    };
  },
  onLoad() {
    // 获取系统状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
  },
  methods: {
    // 返回
    goBack() {
      uni.navigateBack();
    },

    // 搜索
    onSearch(e) {
      console.log("搜索关键词:", e.detail.value);
      // 实现搜索逻辑
    },

    // 切换标签页
    switchTab(index) {
      this.activeTab = index;
      console.log("切换到标签:", this.tabs[index]);
      // 根据标签筛选培训列表
    },

    // 进入培训详情
    goToTrainingDetail(type) {
      uni.navigateTo({
        url: "/pages/training-detail/training-detail?type=" + type,
      });
    },

    // 导航方法
    goToCalendar() {
      uni.navigateTo({
        url: "/pages/calendar/calendar",
      });
    },
    goToHome() {
      uni.navigateTo({
        url: "/pages/home/home",
      });
    },
    goToWorkbench() {
      uni.navigateTo({
        url: "/pages/workbench/workbench",
      });
    },
    goToProfile() {
      uni.navigateTo({
        url: "/pages/profile/profile",
      });
    },
  },
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f9fafb, #eff6ff);
  display: flex;
  flex-direction: column;
}

/* 导航栏 */
.nav-bar {
  height: 44px;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-left {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.nav-title {
  font-size: 17px;
  font-weight: 600;
  color: #000000;
}

.nav-right {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.icon {
  font-size: 20px;
}

/* 主内容 */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 搜索框 */
.search-container {
  padding: 12px 16px;
}

.search-box {
  background-color: #f3f4f6;
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-icon {
  font-size: 16px;
  color: #9ca3af;
}

.search-input {
  flex: 1;
  font-size: 14px;
  background-color: transparent;
}

/* 标签页 */
.tabs-container {
  padding: 0 16px;
  margin-top: 12px;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
}

.tab-item {
  flex: 1;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.tab-text {
  font-size: 14px;
  color: #6b7280;
}

.tab-text-active {
  color: #2563eb;
  font-weight: 500;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  width: 24px;
  height: 2px;
  background-color: #2563eb;
  border-radius: 1px;
}

/* 培训列表 */
.training-list {
  flex: 1;
  padding: 12px 16px;
  box-sizing: border-box;
}

.training-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
}

.training-content {
  display: flex;
  gap: 12px;
}

.training-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 40rpx;
}

.training-icon-orange {
  background-color: #fed7aa;
}

.training-icon-purple {
  background-color: #f3e8ff;
}

.training-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.training-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.training-project {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.training-time {
  font-size: 12px;
  color: #9ca3af;
}

.training-location {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.training-teacher {
  font-size: 12px;
  color: #6b7280;
}

.training-status-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.training-status {
  padding: 4px 8px;
  border-radius: 12px;
}

.training-status-gray {
  background-color: #f9fafb;
}

.training-status-green {
  background-color: #f0fdf4;
}

.training-status-blue {
  background-color: #eff6ff;
}

.training-status-text {
  font-size: 12px;
  font-weight: 500;
}

.training-status-gray .training-status-text {
  color: #374151;
}

.training-status-green .training-status-text {
  color: #15803d;
}

.training-status-blue .training-status-text {
  color: #1d4ed8;
}

/* Font Awesome 图标颜色 */
.fa-graduation-cap {
  color: rgb(147, 51, 234);
}

.fa-user-md {
  color: #ea580c;
}

/* 没有更多数据 */
.no-more {
  text-align: center;
}

.no-more-text {
  font-size: 14px;
  color: #9ca3af;
}

/* 底部导航栏 */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid #f3f4f6;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.tabbar-icon {
  font-size: 22px;
}

.tabbar-text {
  font-size: 12px;
  color: #6b7280;
}

.tabbar-text-active {
  color: #2563eb;
  font-weight: 500;
}

.tabbar-ite-active {
  color: #2563eb;
}
</style>

